<template>
  <div>
    <el-form ref="form" :model="FormData" :rules="rules" label-width="90px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="sku:" prop="sku">
            <span>{{ FormData.skuNo }}</span>
            <i style="margin: 0 5px" class="el-icon-document-copy" @click="useCopy(FormData.skuNo)"></i>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('库位号') + ':'">
            <span>{{ FormData.stockPositionNo }}</span>
            <i style="margin: 0 5px" class="el-icon-document-copy" @click="useCopy(FormData.stockPositionNo)"></i>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('中文名') + ':'" prop="skuNameCn">
            <el-input disabled v-model="FormData.skuNameCn"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('日文名') + ':'" prop="skuNameJp">
            <el-input disabled v-model="FormData.skuNameJp"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('英文名') + ':'" prop="skuNameEn">
            <el-input disabled v-model="FormData.skuNameEn"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('商品分类')" prop="classId">
            <treeselect
              v-model="FormData.classId"
              :options="menuOptions"
              disabled
              :show-count="true"
              :placeholder="$t('请选择')"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('jan编码') + ':'" prop="janCode">
            <el-input disabled v-model="FormData.janCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('品牌') + ':'" prop="brand">
            <el-input disabled v-model="FormData.brand"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('产品规格') + ':'" prop="specification">
            <el-input disabled v-model="FormData.specification"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item :label="$t('长度') + ':'" prop="length">
            <div class="size">{{ FormData.skuLength }}cm</div>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="1" prop="width">
          <el-form-item :label="$t('宽度') + ':'">
            <div class="size">{{ FormData.skuWidth }}cm</div>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="1" prop="height">
          <el-form-item :label="$t('高度') + ':'">
            <div class="size">{{ FormData.skuHeight }}cm</div>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="1" prop="weight">
          <el-form-item :label="$t('重量') + ':'">
            <div class="size">{{ FormData.skuWeight }}g</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item :label="$t('箱规') + ':'" prop="box">
            <el-input disabled v-model="FormData.box"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="1" v-if="FormData.box">
          <el-form-item :label="$t('箱子重量') + ':'" prop="janCode">
            <div class="size">{{ FormData.skuWeight * FormData.box }}g</div>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-form-item
            label-width="90px"
            v-model="FormData.isExpired"
            :label="$t('是否会过期') + ':'"
            prop="isExpired"
          >
            <el-radio-group disabled v-model="FormData.isExpired">
              <el-radio :label="1">{{ $t('是') }}</el-radio>
              <el-radio :label="0">{{ $t('否') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-form-item label-width="120px" :label="$t('最近过期时间') + ':'" prop="latelyExpiredTime">
            <div>{{ FormData.latelyExpiredTime }}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('供应商备注') + ':'" prop="distrRemark">
            <el-input disabled v-model="FormData.distrRemark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('采购备注') + ':'" prop="purchaseRemark">
            <el-input disabled v-model="FormData.purchaseRemark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('卖家备注') + ':'" prop="sellerRemark">
            <el-input type="textarea" :rows="4" v-model="FormData.sellerRemark" maxlength="255" show-word-limit />
            <div style="text-align: right">
              <el-button
                size="mini"
                type="primary"
                v-hasPermi="['distribution:skuDistributor:skuSellerDetailsUpdateRemark']"
                @click="handleEditRemark"
              >
                {{ $t('修改') }}
              </el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-row
            ><el-col :span="24">
              <el-form-item label-width="110px" :label="$t('最近申请价格') + ':'" prop="price">
                <div>{{ FormData.price ? (+FormData.price).toFixed() : '' }} JPY</div>
              </el-form-item>
            </el-col></el-row
          >
          <el-row
            ><el-col :span="24">
              <el-form-item label-width="100px" :label="$t('总数量') + ':'" prop="stock">
                <div>{{ FormData.stock }}</div>
              </el-form-item>
            </el-col></el-row
          >
        </el-col>
      </el-row>
    </el-form>
    <!-- <div class="footer">
            <el-button type="primary" @click="submitForm">保存修改</el-button>
            <el-button @click="close">关 闭</el-button>
        </div> -->
  </div>
</template>

<script>
import {
  getSkuSellerDetails,
  skuSellerDetailsUpdateRemark,
  updateSkuDistributorDetails,
} from '@/api/distribution/sku/basicInformationSeller'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'ErpDistributionSystemPlusBasicInformation',
  components: { Treeselect },

  data() {
    return {
      /**商品分类菜单树选项 */
      menuOptions: [],
      backFormDate: {},
      FormData: {},
      rules: {
        sku: [{ required: true, message: '请输入sku', trigger: 'blur' }],
        skuNameCn: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
    }
  },
  props: {
    skuId: {
      type: String,
      default: '',
    },
  },

  created() {
    this.FormData = {}
    this.SkuDistributorDetails()
    this.$getSkuClassList().then((res) => {
      this.menuOptions = res.menuOptions
    })
  },

  methods: {
    handleEditRemark() {
      const data = {
        skuId: this.skuId,
        distrId: JSON.parse(localStorage.getItem('distr') || '{}').distrId,
        remark: this.FormData.sellerRemark,
      }
      skuSellerDetailsUpdateRemark(data).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.$message({ type: 'success', message: msg })
          this.SkuDistributorDetails()
        }
      })
    },
    // 验证数据是否改变
    validFormData() {
      let FormDataChange = null
      if (JSON.stringify(this.backFormDate) == JSON.stringify(this.FormData)) {
        FormDataChange = false
      } else {
        FormDataChange = true
      }
      return FormDataChange
    },
    SkuDistributorDetails() {
      getSkuSellerDetails({ skuId: this.skuId }).then((res) => {
        this.$parent.$parent.updateSkuImg(res.data.imgUrl)
        this.backFormDate = res.data
        this.FormData = JSON.parse(JSON.stringify(this.backFormDate))
      })
    },
    close() {
      this.$parent.$parent.cancel()
    },
    submitForm() {
      updateSkuDistributorDetails(this.FormData).then((res) => {
        this.$message({
          type: 'success',
          message: res.msg,
        })
        this.SkuDistributorDetails()
      })
    },
    cancel() {},
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-bottom: 16px !important;
}

.size {
  width: 100%;
  text-align: center;
}

.card {
  border-radius: 2px;
  padding: 4px 6px;
  border: solid 1px rgba(0, 0, 0, 0.1);
}

.adjustment {
  border-radius: 2px;
  padding: 4px;
  background-color: rgb(225, 234, 252);
}

.footer {
  margin-top: 10px;
  float: right;
}
</style>
